<template>
  <div class="approval_screen">
    <!-- 招商部门 -->
    <div v-if="(type === 'invest' && user.user.indexOf('recruitStaff') == -1)" class="approval_screen_category"
      @click="investClick">
      {{ investmentName }}
      <van-image :src="dropDown"></van-image>
    </div>
    <!-- 产品部门 -->
    <div v-if="type === 'product' || type === 'product_price'" class="approval_screen_category"
      @click="investmentShows = true">
      {{ productName }}
      <van-image :src="dropDown"></van-image>
    </div>
    <!-- 招商审批类型 -->
    <div v-if="type === 'invest'" class="approval_screen_category" @click="investcategoryShow = true">
      {{ investcategoryName }}
      <van-image :src="dropDown"></van-image>
    </div>
    <!-- 产品审批类型 -->
    <div v-if="type === 'product'" class="approval_screen_category" @click="productcategoryShow = true">
      {{ productcategoryName }}
      <van-image :src="dropDown"></van-image>
    </div>
    <!-- 产品接收状态 -->
    <div v-if="type === 'product_price'" class="approval_screen_category" @click="product_PriceShow = true">
      {{ product_PriceName }}
      <van-image :src="dropDown"></van-image>
    </div>
    <!-- 提交日期 -->
    <div v-if="type === 'invest' || type === 'product' || type === 'product_price'" class="approval_screen_date"
      @click="dateShow = true">
      {{ dateName }}
      <van-image :src="dropDown"></van-image>
    </div>
    <slot></slot>

    <van-action-sheet title="招商部门" v-model:show="investmentShow" :actions="investmentList"
      @select="onSelectInvestment" />
    <van-action-sheet title="审批类型" v-model:show="investcategoryShow" :actions="investcategoryList"
      @select="onSelectInvestCategory" />
    <van-action-sheet title="审批类型" v-model:show="productcategoryShow" :actions="productcategoryList"
      @select="onSelectProductCategory" />
    <van-action-sheet title="接收状态" v-model:show="product_PriceShow" :actions="product_PriceList"
      @select="onSelectProductPrice" />
    <van-action-sheet title="提交日期" v-model:show="dateShow" :actions="dateyList" @select="onSelectDate" />
    <!-- 宋丝语 产品部 -->
    <van-popup v-model:show="investmentShows" round position="bottom">
      <van-picker title="部门" :columns="investmentList" @confirm="investmentListonConfirm"
        @cancel="investmentShows = false" :columns-field-names="customFieldName" />
    </van-popup>

    <van-popup v-model:show="productShow" round position="bottom">
      <van-picker title="部门" :columns="columns" @confirm="onConfirm" @cancel="onCancel"
        :columns-field-names="customFieldName" />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch, onMounted } from 'vue'
import { getDeptAndUserTreeList } from '@/api/approval/index'
import { userStore } from "@/store/user";
const dropDown = new URL("@/assets/approval/drop_down .png", import.meta.url).href
import { getLastNonEmptyValue, getLastNonEmptyList } from '@/utils'
const user = userStore();
const props = defineProps({
  value: { type: Object, default: {} },
  type: { type: String, default: 'invest' } // invest：招商，product：产品,product_price:产品变价接收
})
const emit = defineEmits(['update:value', 'onSubmit'])

// 招商部门
const investmentName = ref('全部')
const investmentShow = ref(false)
const investmentShows = ref(false)
const investmentList = ref([])
// 产品部门
const productName = ref('部门')
const productShow = ref(false)
// 招商审批类型
const investcategoryName = ref('')
const investcategoryShow = ref(false)
const investcategoryList = ref([])
// 产品审批类型
const productcategoryName = ref('')
const productcategoryShow = ref(false)
const productcategoryList = ref([
  { name: '全部', status: '' },
  { name: '待审批', status: '0' },
  { name: '已通过', status: '2' },
  { name: '已驳回', status: '1' },
])
// 产品接收状态
const product_PriceName = ref('')
const product_PriceShow = ref(false)
const product_PriceList = ref([
  { name: '全部', status: '' },
  { name: '待接收', status: '0' },
  { name: '已接收', status: '2' },
])

// 提交日期
const dateName = ref('')
const dateShow = ref(false)
const dateyList = ref([
  { name: "全部", status: null },
  { name: "近一周", status: 7 },
  { name: "近一月", status: 30 },
  { name: "近半年", status: 180 },
])


/** 招商部门点击事件 */
const investClick = () => {
  // 宋丝语
  if (user.user.indexOf('recruitLeader') != -1 || user.user.indexOf('recruitContractAudit') != -1) {
    investmentShows.value = true
  } else {
    investmentShow.value = true
  }
}

// 产品部门数据
const columns = ref()

/** 取消产品部门选择  */
const onCancel = () => {
  productShow.value = false
}
/** 产品部门选择 */
const onConfirm = ({ selectedValues, selectedOptions }) => {
  productShow.value = false
  let params = JSON.parse(JSON.stringify(props.value))
  params.recruiterDeptId = getLastNonEmptyValue(selectedValues)
  productName.value = getLastNonEmptyList(selectedOptions).label
  emit('update:value', params)
  emit('onSubmit')
}
const customFieldName = ref({
  text: 'label',
  value: 'id',
  children: 'children',
})
/** 获取产品部门列表 */
const getProductColumnList = async () => {
  const res = await getDeptAndUserTreeList({})
  columns.value = res.data
}
// 招商部门选择事件
const onSelectInvestment = (selection: any) => {
  investmentShow.value = false;
  let params = JSON.parse(JSON.stringify(props.value))
  params.recruiterDeptId = selection.status
  emit('update:value', params)
  emit('onSubmit')
}
/** 招商部门选择事件 宋丝语*/
const investmentListonConfirm = ({ selectedValues, selectedOptions }) => {
  investmentShows.value = false;
  let params = JSON.parse(JSON.stringify(props.value))
  params.recruiterDeptId = getLastNonEmptyValue(selectedValues)
  investmentName.value = getLastNonEmptyList(selectedOptions).label
  productName.value = getLastNonEmptyList(selectedOptions).label
  emit('update:value', params)
  emit('onSubmit')
}
/** 招商审批状态选择事件 */
const onSelectInvestCategory = (selection: any) => {
  investcategoryShow.value = false;
  let params = JSON.parse(JSON.stringify(props.value))
  params.auditType = selection.status
  emit('update:value', params)
  emit('onSubmit')
}
/** 产品审批状态选择事件 */
const onSelectProductCategory = (selection: any) => {
  productcategoryShow.value = false;
  let params = JSON.parse(JSON.stringify(props.value))
  params.status = selection.status
  emit('update:value', params)
  emit('onSubmit')
}

/** 接收状态选择事件 */
const onSelectProductPrice = (selection: any) => {
  product_PriceShow.value = false;
  let params = JSON.parse(JSON.stringify(props.value))
  params.status = selection.status
  emit('update:value', params)
  emit('onSubmit')
}

/** 提交日期选择事件 */
const onSelectDate = (selection: any) => {
  dateShow.value = false;
  let params = JSON.parse(JSON.stringify(props.value))
  params.startTime = selection.status
  emit('update:value', params)
  emit('onSubmit')
}
// 招商审批类型列表 0：审批中，1：已通过，2：已驳回
const getInvestcategoryList = () => {
  let arr: any = []
  if (props.value.status == 0) {
    arr = [
      { name: '全部', status: '' },
      { name: '核价初审', status: '7' },
      { name: '核价复审', status: '11' },
      { name: '无合同入库', status: '22' },
      { name: '产品部入库', status: '16' },
      { name: '已入库变价', status: '19' }
    ]
  } else if (props.value.status == 1) {
    arr = [
      { name: '全部', status: '' },
      { name: '核价初审', status: '11' },
      { name: '核价复审', status: '13' },
      { name: '无合同入库', status: '15' },
      { name: '产品部入库', status: '18' },
      { name: '已入库变价', status: '21' }
    ]
  } else {
    arr = [
      { name: '全部', status: '' },
      { name: '核价初审', status: '8,9,10' },
      { name: '核价复审', status: '12' },
      { name: '无合同入库', status: '14' },
      { name: '产品部入库', status: '17' },
      { name: '已入库变价', status: '20' }
    ]
  }
  investcategoryList.value = arr
}

watch(() => props.value, () => {
  if (user.user.indexOf('recruitLeader') == -1 && user.user.indexOf('recruitContractAudit') == -1) {
    // 招商部门
    let inv: any = investmentList.value.find((item: any) => {
      return item.status === props.value.recruiterDeptId
    })
    if (inv) {
      investmentName.value = inv.name === '全部' ? '部门' : inv.name
    } else {
      investmentName.value = '部门'
    }
  }
  // 招商审批类型
  let investcategory: any = investcategoryList.value.find((item: any) => {
    return item.status === props.value.auditType
  })
  if (investcategory) {
    investcategoryName.value = investcategory.name === '全部' ? '审批类型' : investcategory.name
  } else {
    investcategoryName.value = '审批类型'
  }
  // 产品审批类型
  let productcategory = productcategoryList.value.find(item => {
    return item.status === props.value.status
  })
  if (productcategory) {
    productcategoryName.value = productcategory.name === '全部' ? '审批类型' : productcategory.name
  } else {
    productcategoryName.value = '审批类型'
  }
  // 产品接收状态
  let product_Price = product_PriceList.value.find(item => {
    return item.status === props.value.status
  })
  if (product_Price) {
    product_PriceName.value = product_Price.name === '全部' ? '接收状态' : product_Price.name
  } else {
    product_PriceName.value = '接收状态'
  }
  // 提交日期
  let datey = dateyList.value.find(item => {
    return item.status === props.value.startTime
  })
  if (datey) {
    dateName.value = datey.name === '全部' ? '提交日期' : datey.name
  } else {
    dateName.value = '提交日期'
  }
  getInvestcategoryList()
}, { deep: true, immediate: true })


/** 获取招商品类列表 */
const GetSystemList = async () => {
  const res = await getDeptAndUserTreeList({})
  if (res.data && res.data.length) {
    if (user.user.indexOf('recruitLeader') != -1) {
      // 取招商部
      const department = res.data.filter(item => item.id == '1861962988832542721')[0].children
      department.unshift({
        label: '全部',
        id: null,
        children: []
      })
      department.forEach(element => {
        element.children.unshift({
          label: '全部',
          id: ''
        })
      });
      investmentList.value = department
    } else if (user.user.indexOf('recruitContractAudit') != -1) { //无合同
      res.data.unshift({
        label: '全部',
        id: null,
        children: []
      })
      res.data.forEach(element => {
        element.children.unshift({
          label: '全部',
          id: ''
        })
      });
      investmentList.value = res.data
    } else if (user.user.indexOf('stock') != -1) { //产品
      res.data.unshift({
        label: '全部',
        id: null,
        children: []
      })
      res.data.forEach(element => {
        element.children.unshift({
          label: '全部',
          id: ''
        })
      });
      investmentList.value = res.data
    } else {
      res.data.forEach(item => {
        item.name = item.label
        item.status = item.id
        item.color = '#323233'
      })
      res.data.unshift({
        label: '全部',
        id: null,
        name: '全部',
        status: null,

      })
      investmentList.value = res.data
    }
  }
}


onMounted(() => {
  GetSystemList()
  getProductColumnList()
})

</script>

<style lang="less" scoped>
.approval_screen {
  box-sizing: border-box;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 10px;
  width: 100%;
  background-color: #fff;
  display: flex;
  color: #1A1B1C;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  border-radius: 15px 15px 0px 0px;

  :deep .van-image {
    width: 10px;
    height: 6px;
    margin-left: 4px;
  }

  .approval_screen_category {
    display: flex;
    align-items: center;
  }

  .approval_screen_date {
    display: flex;
    align-items: center;
  }
}
</style>